<template>
	<view>
		<u-navbar title="资源调度上报" :title-size="36" :title-width="500" title-color="#fff" back-icon-name="arrow-left" back-icon-color="#fff" :background="background" :custom-back="goBack">
		    <view class="navbar-right" slot="right">
		           <view class="message-box right-item" style="padding-right: 40rpx; color: white" @click="gohistory">
		           历史记录
		           </view>
		     </view>
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="160">
				<u-form-item label="归属事件" prop="eventName" :required="true" >
					<u-input v-model="form.eventName" type="select" :border="true" placeholder="请选择" @click="showEvent = true"/>
				</u-form-item>
				<u-form-item label="所属街道" prop="streetName" :required="true">
					<u-input v-model="form.streetName" type="select" :border="true" placeholder="请选择" @click="showStreet = true" />
				</u-form-item>
				<u-form-item label="物资名称" class="name">
					<u-icon name="plus" color="#4187f1" size="30" @click="handleAdd" class="addIcon"></u-icon>
				</u-form-item>
				<ul class="materialBox">
					<li v-for="(item,index) in materialList">
						<u-input v-model="item.suppliesName" type="select" :border="true" placeholder="物资名称" @click="checkMaterial(index)"/>
						<u-input v-model="item.resourceNum"  type="number" maxlength="5" :border="true" placeholder="数量"/>
						<u-icon name="close-circle-fill" color="#e8555b" style="" size="44" @click="remove(index)"></u-icon>
					</li>
				</ul>
				<u-form-item label="防汛队伍" class="name"></u-form-item>
				<ul class="teamBox">
					<li>
						<u-input v-model="form.teamNum"  type="number" maxlength="8" :border="true" placeholder="队伍数量"/>
						<u-input v-model="form.personNum"  type="number" maxlength="8" :border="true" placeholder="总人数"/>
						<u-icon name="close-circle-fill" class="iconBox" color="#fff" size="44" :custom-style="{opacity:0}"></u-icon>
					</li>
				</ul>
				
				<!-- <u-form-item label="队伍数量:">
					<u-input v-model="form.teamNum" type="text" :border="true" placeholder="请输入防汛队伍数量"/>
				</u-form-item>
				<u-form-item label="队伍人数:">
					<u-input v-model="form.personNum" type="text" :border="true" placeholder="请输入防汛队伍人数"/>
				</u-form-item> -->
				<u-button type="primary" size="default" :ripple='true' style="margin-top: 40rpx;" @click="save">提交</u-button>
			</u-form>
		</view>
		<u-toast ref="uToast" />
		<u-select v-model="showEvent" :list="listEvent" @confirm="selectEvent"></u-select>
		<u-select v-model="showStreet" :list="listStreet" @confirm="selectStreet"></u-select>
		<u-select v-model="showName" :list="listName" @confirm="selectName"></u-select>
		<!-- 底部导航 -->
		<!-- <u-tabbar :list="tabbarList" height="40px"></u-tabbar> -->
	</view>
</template>

<script>
	export default {
		components: {},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			
			// this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			if(option.list){  //从修改点进来
				console.log(JSON.parse(decodeURIComponent(option.list)))
				let list = JSON.parse(decodeURIComponent(option.list));
				this.form = list
				this.getIncidentMaterial()
			}
		},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				showEvent:false,
				listEvent:[],
				// eventName:'',
				showStreet:false,
				listStreet:[],
				// streetName:'',
				showName:false,
				listName:[],
				materialIndex:0,
				materialList:[],
				form: {
					eventName: '',
					streetName:'',
					incidentId:'',
					streetId:'',
					teamNum:'',
					personNum:''
				},
				rules: {
					eventName: [
						{
							required: true,
							message: '请选择事件',
							trigger: ['change']
						},
					],
					streetName: [
						{
							required: true,
							message: '请选择街道',
							trigger: ['change']
						},
					]
				}
			}
		},
		computed: {
			tabbarList (){
				return this.$store.state.common.tabbarList
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			checkMaterial(index){
				this.showName = true
				this.materialIndex = index
			},
			selectEvent(data){
				this.form.eventName = data[0].label
				this.form.incidentId = data[0].value
				if(this.form.incidentId!='' && this.form.streetId!=''){
					this.getIncidentMaterial()
				}
			},
			selectStreet(data){
				this.form.streetName = data[0].label
				this.form.streetId = data[0].value
				if(this.form.incidentId!='' && this.form.streetId!=''){
					this.getIncidentMaterial()
				}
			},
			selectName(data){
				this.materialList[this.materialIndex].suppliesName = data[0].label
				this.materialList[this.materialIndex].suppliesId = data[0].value
			},
			getIncidentMaterial(){  //获取当前事件 街道对应的内容
				let params = {
					incidentId:this.form.incidentId,
					streetId:this.form.streetId,
				}
				this.$api.reqApi.getIncidentMaterial(params).then(res => {
					if(res.code == 200){
						this.materialList = res.data.supplies
						if( res.data.team.length>0){
							this.form.teamNum = res.data.team[0].teamNum
							this.form.personNum = res.data.team[0].personNum
						}
					}
				})
			},
			handleAdd(){
				this.materialList.push({
					suppliesName:'',
					suppliesId:'',
					resourceNum:''
			    })
			},
			remove(index){
				this.materialList.splice(index, 1);
			},
			gohistory(){uni.navigateTo({url: '/pages/scheduling/resourceReport/history'})},
			save(){
				//  this.$refs.uForm.validate(valid => {
				// 	if (!valid) {
				// 		console.log('验证失败');
				// 		return
				// 	}});
					if(this.form.eventName==''){
						this.$refs.uToast.show({
							title: '请选择事件',
							type: 'default'
						})
					}else if(this.form.streetName==''){
						this.$refs.uToast.show({
							title: '请选择街道',
							type: 'default'
						})
					}else{
						this.form.list = this.materialList;
						this.$api.reqApi.saveIncidentMaterial(this.form).then(res => {
							if(res.code == 200){
								uni.showToast({
									icon:'none',
										title:res.message,
									type: 'success',
								})
								this.form = {
									eventName: '',
									streetName:'',
									incidentId:'',
									streetId:'',
									teamNum:'',
									personNum:''
								}
								this.materialList = []
								this.gohistory()
							}
						});
					}
						
					// }
				// 
				
			},
			getOverIncidentName(){  //归属事件接口
				this.$api.reqApi.getOverIncidentName().then(res => {
					if(res.code == 200){
						this.listEvent = res.data.map(item => {
							return {
								value: item.id,
								label: item.name,
							}
						});
					}
				})
			},
			street(){  //街道接口
				this.$api.reqApi.street().then(res => {
					if(res.code == 200){
						this.listStreet = res.data.map(item => {
							return {
								value: item.id,
								label: item.name,
							}
						});
					}
				})
			},
			getMaterialAll(){
				this.$api.reqApi.getMaterialAll().then(res => {
					if(res.code == 200){
						this.listName = res.data.map(item => {
							return {
								value: item.code,
								label: item.name,
							}
						});
					}
				})
			}
				
		},
		mounted() {
			this.getOverIncidentName()
			this.street();
			this.getMaterialAll()
		}
	}
</script>

<style lang="scss" scoped>
uni-page-body{
	background-color: #fff;
}
.content{
	background-color: #fff;
	padding: 20rpx 30rpx;
	margin-bottom: 40rpx;
}
.name{
	border-bottom: 0;
	::v-deep .u-form-item--left__content__label{
		color: #333;
	}
}
.materialBox,.teamBox{
	li{
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		.u-input{
			width: 44%;
			flex: inherit;
			background-color: #f6f8fa;
			padding: 0 30rpx !important;
			box-sizing: border-box;
			text-align: left !important;
		}
		::v-deep .u-input__right-icon--select{
			line-height: 78rpx;
		}
		::v-deep .u-input__right-icon ,.u-flex{
			line-height: 78rpx;
		}
	}
}

</style>
